<template>
  <div class="itemdiv">
    <h3 class="itemTitle">提现积分：<span>{{withdrawalIntrgral}}</span></h3>
    <div class="itemTxt">
      <div class="drawMoney">
        <h4>￥{{withdrawalMoney}}</h4>
        <p>提现金额</p>
      </div>
      <div class="drawTime">
        <h4>-提现时间-</h4>
        <p>{{timeFormat}}</p>
      </div>
      <div class="drawState">
        <h4>{{stateValue}}</h4>
        <p>状态</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      withdrawalIntrgral:{
          type: Number,
      },
      withdrawalMoney:{
          type: Number,
      },
      withdrawalTime:{
          type: Number,
      },
      withdrawalState:{
          type: Number,
      },
    },
    computed:{
      timeFormat(){
        return this.formatDateTime(this.withdrawalTime)
      },
      stateValue(){
        switch (this.withdrawalState) {
          case 0:
              this.stateTxt ='已受理'
              return this.stateTxt
          case 1:
              this.stateTxt ='提现失败'
              return this.stateTxt
          case 2:
              this.stateTxt ='银行处理中'
              return this.stateTxt
          case 3:
              this.stateTxt ='到账成功'
              return this.stateTxt
          case 4:
              this.stateTxt ='到账失败'
              return this.stateTxt
          case 5:
              this.stateTxt ='银行退票'
              return this.stateTxt
          default:
              this.stateTxt ='已受理'
              return this.stateTxt
        }
      }
    },
    methods:{
      formatDateTime (inputTime) {
        let date = new Date(inputTime);
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let minute = date.getMinutes();
        let second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
      },
    }
  }
</script>

<style scoped>
.itemdiv{
  background: #fff;
  padding: 0 24rpx;
  overflow: hidden;
  border-bottom:1px solid #F1F1F5;
}
.itemdiv:last-child{
  border: 0;
}
.itemdiv .itemTitle{
  font-size: 30rpx;
  color: #000;
  margin: 25rpx 0 30rpx;
}
.itemdiv .itemTitle span{
  font-size: 34rpx;
  color: #E38A8A;
}
.itemdiv .itemTxt{
  display: flex;
  margin-bottom: 15rpx;
}
.itemdiv .itemTxt .drawMoney{
  text-align: left;
  width: 20%;
}
.itemdiv .itemTxt .drawMoney>h4{
  line-height: 55rpx;
  font-size: 36rpx;
  color: #E38A8A;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.itemdiv .itemTxt .drawMoney>p{
  font-size: 26rpx;
  color: #A09F9F;
}
.itemdiv .itemTxt .drawTime{
  flex: 1;
  font-size: 26rpx;
  color: #C5C3C4;
  text-align: center;
  overflow: hidden;
  margin: 0 10rpx;
}
.itemdiv .itemTxt .drawTime>h4{
  line-height: 55rpx;
}
.itemdiv .itemTxt .drawTime>p{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.itemdiv .itemTxt .drawState{
  width: 20%;
  text-align: right;
}
.itemdiv .itemTxt .drawState>h4{
  line-height: 55rpx;
  font-size: 32rpx;
  color: #DEB689;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.itemdiv .itemTxt .drawState>p{
  font-size: 26rpx;
  color: #A09F9F;
  text-align: center;
}
</style>
